import { TabBar } from "antd-mobile"
import { FC, useMemo, useState } from "react"
import { useLocation, useNavigate } from "react-router-dom"
import './tabbar.less'
import homeIcon from '@/assets/images/tabbar/home_2.png'
import activeHomeIcon from '@/assets/images/tabbar/home_1.png'
import fastIcon from '@/assets/images/tabbar/fast.png'
import activeFastIcon from '@/assets/images/tabbar/fast.png'
import mineIcon from '@/assets/images/tabbar/my_2.png'
import activeMineIcon from '@/assets/images/tabbar/my_1.png'

const showPathes = ['/', '/fast', '/mine']

const Bottom: FC = () => {
    // useHistory 不是新版路由的用法 ， 用来得到一个对象，然后调用 history.push 跳转的
    // const history = useHistory()
    const location = useLocation()
    const { pathname } = location
    // 因为要跳转
    const navigate = useNavigate()
    // 设置一个响应式数据，控制是否显示
    const [show, setShow] = useState(true)

    // 实现类似监听路由的效果
    useMemo(() => {
        setShow(showPathes.includes(pathname))
        return pathname
    }, [pathname])

    const setRouteActive = (value: string) => {
        // history.push(value)
        navigate(value)
    }

    const tabs = [
        {
            key: '/',
            title: '首页',
            icon: <img src={homeIcon} />,
            activeIcon: <img src={activeHomeIcon} />
        },
        {
            key: '/fast',
            title: '快速刷题',
            icon: <img src={fastIcon} />,
            activeIcon: <img src={activeFastIcon} />
        },
        {
            key: '/mine',
            title: '我的',
            icon: <img src={mineIcon} />,
            activeIcon: <img src={activeMineIcon} />
        },
    ]

    return (
        <div className="tab-bar" style={{ display: show ? 'block' : 'none' }}>
            <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
                {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={pathname === item.key ? item.activeIcon : item.icon} title={item.title} />
                ))}
            </TabBar>
        </div>
    )
}

export default Bottom;